<template>
  <ph-view>
    <ph-blockquote type="warning">
      note： PhFormColor (凡是PhForm为前缀的)
      表单组件需要以PhForm为父组件工作，如需单独使用，如下：
      <br />
      import {PhColor} from "@/index" 用法同上但是没有验证功能, @change 替换
      @ph-change
    </ph-blockquote>
    <div class="asdf" :style="{ backgroundColor: value }"></div>
    <ph-tab>
      <ph-tab-panel title="PhFormColor 案例">
        <!-- note： PhFormColor (凡是PhForm为前缀的) 表单组件需要以PhForm为父组件工作，如需单独使用，如下： -->
        <ph-form>
          <ph-divider>表单默认</ph-divider>
          <ph-form-color
            style="width: 150px"
            :value="value"
            @ph-change="onChange"
          />
          <ph-divider>表单关闭颜色预定义</ph-divider>
          <ph-form-color
            style="width: 150px"
            :value="value"
            :preshow="false"
            @ph-change="onChange"
          />
          <ph-divider
            >自定义颜色预定义
            :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']"</ph-divider
          >
          <ph-form-color
            style="width: 150px"
            :value="value"
            :precolors="['#ff0000', '#ff0', '#f0f', '#0f0', '#00f', '#0ff']"
            @ph-change="onChange"
          />
          <ph-divider>表单禁止</ph-divider>
          <ph-form-color
            style="width: 150px"
            :value="value"
            :disabled="true"
            @ph-change="onChange"
          />
        </ph-form>
        <ph-pretty>{{ demo1 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="PhColor 案例">
        <!-- import {PhColor} from "@/index" 用法同上但是没有验证功能, @change 替换 @ph-change -->
        <ph-divider>表单默认</ph-divider>
        <ph-color style="width: 150px" :value="value" @change="onChange" />
        <ph-divider>表单关闭颜色预定义</ph-divider>
        <ph-color
          style="width: 150px"
          :value="value"
          :preshow="false"
          @change="onChange"
        />
        <ph-divider
          >自定义颜色预定义
          :precolors="['#ff0000','#ff0','#f0f','#0f0','#00f','#0ff']"</ph-divider
        >
        <ph-color
          style="width: 150px"
          :value="value"
          :precolors="['#ff0000', '#ff0', '#f0f', '#0f0', '#00f', '#0ff']"
          @change="onChange"
        />
        <ph-divider>表单禁止</ph-divider>
        <ph-color
          style="width: 150px"
          :value="value"
          :disabled="true"
          @change="onChange"
        />
        <ph-pretty>{{ demo2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
        <ph-blockquote type="warning">
          note：该组件内部使用<router-link to="/colorBtn"
            >【PhColorButton】</router-link
          >组件，所以需要引入相关依赖，参考<router-link to="/colorBtn"
            >【PhColorButton】用法</router-link
          >
        </ph-blockquote>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhView,
  PhForm,
  PhFormColor,
  PhColor,
  PhTab,
  PhTabPanel,
  PhBlockquote,
  PhDivider,
} from "@/index";
import * as Data from "../data/color-input";
export default defineComponent({
  components: {
    PhView,
    PhForm,
    PhFormColor,
    PhColor,
    PhTab,
    PhTabPanel,
    PhBlockquote,
    PhDivider,
  },
  setup() {
    const value = ref("#ff000a");
    const onChange = function (v: string) {
      console.log(v, "change");
      value.value = v;
    };
    return { value, onChange, ...Data };
  },
});
</script>
<style lang="scss">
.asdf {
  height: 20px;
  margin: 10px 0;
}
</style>
